<template>
  <div>
    <div class="topTitle" @click="checkedNav">
      <div class="allBan">
        <div v-if="!grade">年级</div>
        <dict-tag v-if="grade" :options="dict.type.et_grade" :value="grade" />
      </div>
      <div v-if="allOff" class="optionChild" v-outside>
        <div
          class="childs"
          v-for="dict in dict.type.et_grade"
          :key="dict.value"
          @click.stop="checkedBan(dict.value)"
        >
          {{ dict.label }}
        </div>
      </div>
    </div>
    <div id="averagetrend"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  dicts: ["et_grade"],
  data() {
    return {
      grade: "",
      allOff: false,
    };
  },
  methods: {
    checkedBan(value) {
      this.grade = value;
      this.allOff = false;
    },
    checkedNav() {
      this.allOff = !this.allOff;
    },

    //绘制图表
    drawLine() {
      let averagetrend = document.getElementById("averagetrend");
      const mychart = echarts.init(averagetrend);
      console.log(mychart);
      mychart.setOption({
        title: {
          text: "校级历次评测平均分趋势",
        },
        // legend: {
        //   data: ["平均分数"],
        // },
        legend: {
          orient: "horizontal",
          x: "center:",
          y: "top",
          left: 200,
          itemGap: 40,
          itemStyle: {
            color: "#63D6A3",
          },
          data: [
            {
              name: "年级平均分",
              icon: "circle",
              textStyle: { fontWeight: "bold", color: "#000" },
              itemStyle: {
                color: "#4DC698",
              },
            },
          ],
        },
        tooltip: {
          position: "top",

          axisPointer: {
            type:'line',
            label: {
              backgroundColor: "#000",
            },
          },
        },

        //   保存图片
        //   toolbox: {
        //     feature: {
        //       saveAsImage: {}
        //     }
        //   },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "平均分数",
            type: "line",
            stack: "Total",
            itemStyle: {
              color: "#5EC69E",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(181,232,206)",
                },
                {
                  offset: 1,
                  color: "rgb(251,255,254)",
                },
              ]),
            },
            smooth: true,
            data: [80, 78, 88, 71, 76, 78, 86, 69, 77, 75, 76, 89],
          },
          {
            name: "年级平均分",
            type: "line",
            stack: "Total",
            itemStyle: {
              color: "#5EC69E",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(181,232,206)",
                },
                {
                  offset: 1,
                  color: "rgb(251,255,254)",
                },
              ]),
            },
            // smooth: true,
            data: ["-"],
          },
        ],
      });
    },
  },

  mounted() {
    this.drawLine();
  },
};
</script>

<style lang="scss" scoped>
#averagetrend {
  height: 300px;
  width: 1200px;
  // width:100%;
}

.topTitle {
  width: 200px;
  height: 50px;
  padding: 0 6px;
  margin-right: 5px;
  width: 200px;
  text-align: center;
  position: absolute;
  left: 1100px;
  z-index: 4;

  .allBan {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 10px;
      height: 12px;
      margin-left: 12px;
    }
  }

  .optionChild {
    width: 70%;
    position: relative;
    top: 0px;
    z-index: 1;
    border: 1px solid #ccc;
    background: #fff;

    .childs {
      widows: 100%;
      height: 20px;
      margin-bottom: 5px;
      line-height: 20px;
      text-align: center;

      &:hover {
        color: red;
      }
    }
  }
}
</style>
